<div class="card">
  <div class="card-header">
    <div class="row">
      <div class="col col-md-6">
        <h5 class="card-title">车辆列表</h5>
      </div>
    
    </div>
  </div>
  <div class="card-body border-bottom">
    <form (ngSubmit)="search()">
      <div class="d-flex align-items-center flex-wrap">
        <div class="me-3 mb-2 d-flex align-items-center">
          <label for="vehicleNumberSearch" class="form-label mb-0 me-2 text-nowrap">车号:</label>
          <input type="text" id="vehicleNumberSearch" class="form-control" style="width: 150px;" [(ngModel)]="vehicleNumberKeyword" name="vehicleNumberKeyword">
        </div>
        <div class="me-3 mb-2 d-flex align-items-center">
          <label for="vehicleModelSearch" class="form-label mb-0 me-2 text-nowrap">车型:</label>
          <input type="text" id="vehicleModelSearch" class="form-control" style="width: 150px;" [(ngModel)]="vehicleModelKeyword" name="vehicleModelKeyword">
        </div>
        <div class="me-3 mb-2 d-flex align-items-center">
          <label for="qualifiedSearch" class="form-label mb-0 me-2 text-nowrap">准驾驾照:</label>
          <input type="text" id="qualifiedSearch" class="form-control" style="width: 150px;" [(ngModel)]="qualifiedKeyword" name="qualifiedKeyword">
        </div>
        <div class="ms-md-auto mb-2">
          <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i><span>查询</span></button>
          <button class="btn btn-secondary ms-2" type="button" (click)="resetSearch()">重置</button>
        </div>
      </div>
    </form>
  </div>
  <div class="card-body border-bottom">
    <button id="create" class="btn btn-primary" type="button" (click)="openCreateModal()">
      <i class="fa fa-plus me-1"></i>
      <span>录入</span>
    </button>
  </div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>车号</th>
            <th>车型</th>
            <th>最大体积</th>
            <th>载重</th>
            <th>载人数</th>
            <th>准驾驾照</th>
            <th>姓名</th>
            <th>电话</th>
            <th>默认司机</th>
            <th>车牌号</th>
            <th>区域</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let vehicleItem of vehicle.items">
            <td>{{ vehicleItem.vehicleNumber }}</td>
            <td>{{ vehicleItem.vehicleModel }}</td>
            <td>{{ vehicleItem.maximumVolume }}</td>
            <td>{{ vehicleItem.loadCapacity }}</td>
            <td>{{ vehicleItem.passengers }}</td>
            <td>{{ vehicleItem.qualified }}</td>
            <td>{{ vehicleItem.vehicleName }}</td>
            <td>{{ vehicleItem.phone }}</td>
            <td>{{ vehicleItem.defaultDriver }}</td>
            <td>{{ vehicleItem.licenseNumber }}</td>
            <td>{{ vehicleItem.region }}</td>
            <td>
              <button class="btn btn-sm btn-primary me-1" type="button" (click)="openEditModal(vehicleItem.id)">
                <i class="fa fa-edit"></i>
                编辑
              </button>
              <button class="btn btn-sm btn-danger" type="button" (click)="deleteVehicle(vehicleItem.id)">
                <i class="fa fa-trash"></i>
                删除
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="card-footer">
    <div class="row">
      <div class="col-md-6">
        <div class="pagination-info" *ngIf="vehicle.items.length > 0">
          当前显示 {{ vehicle.totalCount > 0 ? ((list.page - 1) * currentPageSize) + 1 : 0 }} - {{ Math.min(list.page * currentPageSize, vehicle.totalCount) }} 条，总计 {{ vehicle.totalCount }} 条
        </div>
      </div>
      <div class="col-md-6">
        <div class="d-flex justify-content-end align-items-center">
          <div class="me-3">
            <label class="me-2">每页显示：</label>
            <select class="form-select form-select-sm d-inline-block" style="width: auto;"
                    [(ngModel)]="currentPageSize"
                    (change)="onPageSizeChange(currentPageSize)">
              <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
            </select>
          </div>
          <nav aria-label="分页导航" *ngIf="vehicle.items.length > 0">
            <ul class="pagination pagination-sm mb-0">
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:;" (click)="goToPage(1)">
                  <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
              </li>
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:;" (click)="goToPage(list.page - 1)">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <ng-container *ngFor="let page of visiblePageNumbers">
                <li class="page-item disabled" *ngIf="page < 0">
                  <span class="page-link">...</span>
                </li>
                <li class="page-item" *ngIf="page > 0" [class.active]="list.page === page">
                  <a class="page-link" href="javascript:;" (click)="goToPage(page)">{{ page }}</a>
                </li>
              </ng-container>
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:;" (click)="goToPage(list.page + 1)">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:;" (click)="goToPage(maxPageCount)">
                  <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
          <div class="ms-3 d-flex align-items-center" *ngIf="maxPageCount > 1">
            <span class="me-2">跳至</span>
            <input
              type="number"
              class="form-control form-control-sm"
              style="width: 60px;"
              min="1"
              [max]="maxPageCount"
              [(ngModel)]="inputPageNumber"
              (change)="onPageInputChange($event)"
              (keyup)="onPageInputKeyUp($event)"
            />
            <span class="ms-2">页</span>
            <button class="btn btn-sm btn-outline-primary ms-2" (click)="goToPage(inputPageNumber)">确定</button>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="vehicle.items.length === 0" class="text-center">
      <p>暂无数据</p>
    </div>
  </div>
</div>
<!-- 新建/编辑车辆模态框 -->
<div class="modal fade" [class.show]="isModalOpen" [class.d-block]="isModalOpen" tabindex="-1" role="dialog" aria-modal="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{{ isEditMode ? '编辑车辆' : '新建车辆' }}</h5>
        <button type="button" class="btn-close" (click)="closeModal()" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <form [formGroup]="createVehicleForm">
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="vehicleNumber" class="form-label">车号<span class="text-danger">*</span></label>
              <input type="text" class="form-control" id="vehicleNumber" formControlName="vehicleNumber">
              <div *ngIf="createVehicleForm.get('vehicleNumber').invalid && (createVehicleForm.get('vehicleNumber').dirty || createVehicleForm.get('vehicleNumber').touched)" class="text-danger">
                <small *ngIf="createVehicleForm.get('vehicleNumber').errors?.required">车号不能为空</small>
                <small *ngIf="createVehicleForm.get('vehicleNumber').errors?.maxlength">车号不能超过50个字符</small>
              </div>
            </div>
            <div class="col-md-6">
              <label for="vehicleModel" class="form-label">车型</label>
              <input type="text" class="form-control" id="vehicleModel" formControlName="vehicleModel">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="maximumVolume" class="form-label">最大体积</label>
              <input type="number" class="form-control" id="maximumVolume" formControlName="maximumVolume">
            </div>
            <div class="col-md-6">
              <label for="loadCapacity" class="form-label">载重</label>
              <input type="number" class="form-control" id="loadCapacity" formControlName="loadCapacity">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="passengers" class="form-label">载人数</label>
              <input type="number" class="form-control" id="passengers" formControlName="passengers">
            </div>
            <div class="col-md-6">
              <label for="qualified" class="form-label">准驾驾照</label>
              <input type="text" class="form-control" id="qualified" formControlName="qualified">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="vehicleName" class="form-label">姓名</label>
              <input type="text" class="form-control" id="vehicleName" formControlName="vehicleName">
            </div>
            <div class="col-md-6">
              <label for="phone" class="form-label">电话</label>
              <input type="text" class="form-control" id="phone" formControlName="phone">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6">
              <label for="defaultDriver" class="form-label">默认司机</label>
              <input type="text" class="form-control" id="defaultDriver" formControlName="defaultDriver">
            </div>
            <div class="col-md-6">
              <label for="licenseNumber" class="form-label">车牌号</label>
              <input type="text" class="form-control" id="licenseNumber" formControlName="licenseNumber">
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-md-12">
              <label for="region" class="form-label">区域</label>
              <input type="text" class="form-control" id="region" formControlName="region">
            </div>
          </div>
        </form>
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="closeModal()">取消</button>
        <button type="button" class="btn btn-primary" [disabled]="isSaving" (click)="save()">保存</button>
      </div>
    </div>
  </div>
</div> 